<!DOCTYPE html>
<html lang="en">

<head>
    <title>注册</title>
    <#include "/lx/activity/components/meta.html" />
    <#include "/lx/activity/components/stylesheets.html" />
    <link rel="stylesheet" href="//i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
    <link rel="stylesheet" href="/lx/activity/stylesheets/signUp.css?v=5">
</head>

<body>
    <div id="app">
        <div class="title">必填<div></div>
        </div>
        <div class="block">
            <div class="field">
                <div class="label">手机号</div>
                <div class="input-wrap">
                    {{ account }}
                </div>
            </div>
            <div class="field">
                <div class="label">密码</div>
                <div class="input-wrap">
                    <input v-model="password" type="password" placeholder="请输入密码" />
                </div>
            </div>
        </div>
        <div class="block">
            <div class="field">
                <div class="label">中文名</div>
                <div class="input-wrap">
                    <input v-model="name" placeholder="请输入中文名" />
                </div>
            </div>
            <div class="field">
                <div class="label">姓（拼音）</div>
                <div class="input-wrap">
                    <input v-model="lastName" placeholder="请输入姓（拼音）" />
                </div>
            </div>
            <div class="field">
                <div class="label">名（拼音）</div>
                <div class="input-wrap">
                    <input v-model="firstName" placeholder="请输入名（拼音）" />
                </div>
            </div>
            <div class="field">
                <div class="label">英文名</div>
                <div class="input-wrap">
                    <input v-model="englishName" placeholder="请输入英文名" />
                </div>
            </div>
            <div class="field">
                <div class="label">性别</div>
                <div class="input-wrap ui-select">
                    <!-- <div class="popup">
                        <div>{{ sex === '' ? '' : sexArray[sex] }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="sex">
                        <option value="">请选择性别</option>
                        <option :value="index" v-for="(item, index) in sexArray">{{ item }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="block">
            <div class="field">
                <div class="label">省份</div>
                <div class="input-wrap ui-select">
                    <!-- <div class="popup">
                        <div>{{ province ? province : '' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="province" @change="onProvinceChange">
                        <option value="">请选择省份</option>
                        <option :value="item.value" v-for="(item, index) in cityArray">{{ item.label }}</option>
                    </select>
                </div>
            </div>
            <div class="field">
                <div class="label">市县</div>
                <div class="input-wrap ui-select">
                    <!-- <div class="popup">
                        <div>{{ city ? city : '' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="city">
                        <option value="">请选择市县</option>
                        <option :value="item.value" v-for="(item, index) in childrenCityArray">{{ item.label }}</option>
                    </select>
                </div>
            </div>
            <div class="field">
                <div class="label">公司</div>
                <div class="input-wrap ui-select" @click="goSelectCompany">
                    <!-- <div class="popup">
                        <div>{{ companyIndex === '' ? '' : companyArray[companyIndex].name }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <!-- <select v-model="companyId">
                        <option value="">请选择公司</option>
                        <option :value="item.id" v-for="(item, index) in companyArray">{{ item.name }}</option>
                    </select> -->
                    <div class="popup">{{ companyName ? companyName : '' }}</div>
                </div>
                <!-- <el-select v-model="companyId" filterable placeholder="请选择公司" style="width: 100%;">
                    <el-option v-for="item in companyArray" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select> -->
            </div>
            <div class="field">
                <div class="label">擅长咨询国家</div>
                <!-- <div class="input-wrap ui-select">
                    <select v-model="country">
                        <option value="">请选择擅长咨询国家</option>
                        <option :value="item" v-for="(item, index) in countryArray">{{ item }}</option>
                    </select>
                </div> -->
                <div class='selector'>
                    <div class='selector-item' :class="{ 'selector-item-checked': item.selected }" @click="selectCountry(index)" v-for="(item, index) in countryArray" :key="index">{{ item.country }}</div>
                </div>
            </div>
            <div class="field">
                <div class="label">职能类别</div>
                <div class="input-wrap ui-select">
                    <!-- <div class="popup">
                        <div>{{ department }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="department">
                        <option value="">请选择职能类别</option>
                        <option :value="item" v-for="(item, index) in departmentArray">{{ item }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="upload-block">
            <div class="upload-block-hd">工作名片</div>
            <div class="upload-block-bd">
                <div class="image cutimg">
                    <img :src="card ? card : '/lx/activity/assets/img/chooseImage.png'"></img>
                </div>
                <input type="file" id="file" accept="image/*" @change="uploadImg">
            </div>
        </div>
        <div class="title">选填<div></div>
        </div>
        <div class="block">
            <div class="field">
                <div class="label">服务起始年份</div>
                <div class="input-wrap">
                    <input type="number" v-model="year" placeholder="请输入起始年份" />
                </div>
            </div>
            <div class="field">
                <div class="label">服务起始月份</div>
                <div class="input-wrap">
                    <input type="number" v-model="month" placeholder="请输入起始月份" />
                </div>
            </div>
        </div>
        <div class="block">
            <div class="field">
                <div class="label">硕士及以上毕业院校</div>
                <div class="input-wrap ui-select" @click="goSelectSchool(1)">
                    <!-- <input v-model="postgradSchool" placeholder="请输入硕士及以上毕业院校（选填）" /> -->
                    <div class="popup">{{ postgradSchoolName ? postgradSchoolName : '' }}</div>
                </div>
            </div>
            <div class="field">
                <div class="label">专业类别</div>
                <div class="input-wrap ui-select">
                    <!-- <div class="popup">
                        <div>{{ postgradMajor }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="postgradMajor">
                        <option value="">请选择专业类别</option>
                        <option :value="item" v-for="(item, index) in majorArray">{{ item }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="block">
            <div class="field">
                <div class="label">本科毕业院校</div>
                <div class="input-wrap ui-select" @click="goSelectSchool(0)">
                    <!-- <input v-model="undergradSchool" placeholder="请输入本科毕业院校（选填）" /> -->
                    <div class="popup">{{ undergradSchoolName ? undergradSchoolName : '' }}</div>
                </div>
            </div>
            <div class="field">
                <div class="label">专业类别</div>
                <div class="input-wrap ui-select">
                    <!-- <div class="popup">
                        <div>{{ undergradMajor }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="undergradMajor">
                        <option value="">请选择专业类别</option>
                        <option :value="item" v-for="(item, index) in majorArray">{{ item }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="block">
            <div class="field">
                <div class="label">爱好</div>
                <div class="input-wrap">
                    <!-- <div class="popup">
                        <div>{{ hobby }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <!-- <select v-model="hobby">
                        <option value="">请选择爱好</option>
                        <option :value="item" v-for="(item, index) in hobbyArray">{{ item }}</option>
                    </select> -->
                    <input v-model="hobby" placeholder="" />
                </div>
            </div>
        </div>
        <div class="submit-wrap">
            <button class="am-btn am-btn-block submit theme-background-color1" @click="submit">提交</button>
        </div>
    </div>
    <#include "/lx/activity/components/scripts.html" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9/crypto-js.min.js"></script>
    <script type="text/javascript" src="/lx/activity/assets/json/city.json"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                id: '',
                account: '',
                password: '',
                name: '',
                lastName: '',
                firstName: '',
                englishName: '',
                sex: '',
                province: '',
                city: '',
                companyId: '',
                country: '',
                department: '',
                year: '',
                month: '',
                postgradSchool: '',
                postgradMajor: '',
                undergradSchool: '',
                undergradMajor: '',
                hobby: '',
                card: '',

                postgradSchoolName: '',
                undergradSchoolName: '',

                sexArray: ["男", "女"],
                companyArray: [],
                companyIndex: '',
                companyName: '',
                // countryArray: ["港澳台", "英国", "澳大利亚", "美国", "加拿大", "爱尔兰", "新西兰", "其他"],
                countryArray: [{
                    country: "港澳台",
                    selected: 0
                }, {
                    country: "英国",
                    selected: 0
                }, {
                    country: "澳大利亚",
                    selected: 0
                }, {
                    country: "美国",
                    selected: 0
                }, {
                    country: "加拿大",
                    selected: 0
                }, {
                    country: "爱尔兰",
                    selected: 0
                }, {
                    country: "新西兰",
                    selected: 0
                }, {
                    country: "其他",
                    selected: 0
                }],
                departmentArray: ["咨询顾问", "文案申请", "外联及其他", "公司管理"],
                majorArray: ["数学和自然科学 Mathematics and Science", "医学 Medical Sciences", "工程 Engineering", "人文艺术 Humanities and Arts", "社会科学 Social Sciences", "商业与经济 Business and Economics"],
                hobbyArray: [],
                cityArray: city,
                childrenCityArray: []
            }
        },
        mounted: function() {
            this.init();
        },
        methods: {
            init() {
                var self = this;
                // var idStr = '${uid!}';
                var accountStr = '${account!}';
                // if (idStr) {
                //     self.id = Number(idStr);
                // }
                if (accountStr) {
                    self.account = accountStr;
                }

                // var url = '/lx/mini/user/company';
                // var params = {
                //     noPage: 1
                // };
                // var success = function(res) {
                //     self.companyArray = res.info;
                // }
                // var fail = function() {};
                // var complete = function() {};
                // request(url, params, success, fail, complete);
            },
            aesCBC(text) {
                var aesText = text;
                var key = CryptoJS.enc.Utf8.parse('liuxue!@#$%^&*()');
                var iv = CryptoJS.enc.Utf8.parse('RandomInitVector');
                aesText = CryptoJS.AES.encrypt(text, key, {
                    iv: iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                }).toString();
                return aesText;
            },
            uploadImg(event) {
                loading();
                let file = event.target.files[0];
                let param = new FormData();
                param.append("file", file);

                let config = {
                    headers: { 'Content-Type': 'multipart/form-data' }
                };
                axios.post('/lx/mini/api/upload', param, config)
                    .then(response => {
                        if (response.data.status == 200) {
                            this.card = response.data.info;
                            adjustImgs();
                        } else {
                            msg("上传失败");
                            console.log(response.data);
                        }
                    })
                    .catch(error => {
                        msg("上传失败");
                        console.log(error);
                    })
                    .then(function() {
                        endLoading();
                    })
            },
            submit() {
                var self = this;
                var country = '';
                for (var i = 0; i < self.countryArray.length; i++) {
                    if (self.countryArray[i].selected === 1) {
                        country += self.countryArray[i].country + '、';
                    }
                }
                if (country) {
                    country = country.substr(0, country.length - 1);
                }

                if (!self.password) {
                    msg('请输入密码');
                    return;
                }
                if (!self.name) {
                    msg('请输入中文名');
                    return;
                }
                if (!self.lastName || !self.firstName) {
                    msg('请输入姓/名拼音');
                    return;
                }
                if (!self.englishName) {
                    msg('请输入英文名');
                    return;
                }
                if (self.sex === '') {
                    msg('请选择性别');
                    return;
                }
                if (!self.province || !self.city) {
                    msg('请输入省份/市县');
                    return;
                }
                if (self.companyId === '') {
                    msg('请选择公司');
                    return;
                }
                if (!country) {
                    msg('请选择擅长国家');
                    return;
                }
                if (!self.department) {
                    msg('请选择职能类别');
                    return;
                }
                if (!self.card) {
                    msg('请上传工作名片');
                    return;
                }
                var location = '';
                if (self.province != '') {
                    location = self.province + ",";
                    if (self.city != '') {
                        location += self.city;
                    }
                }
                var startDate = '';
                if (self.year !== '' && self.month !== '') {
                    startDate = self.year + '-' + self.month;
                } else {
                    // msg("请输入服务起始年份/月份");
                    // return;
                }

                var url = '/lx/mini/user/register';
                var params = {
                    // id: self.id,
                    account: self.account,
                    password: self.aesCBC(self.password),
                    name: self.name,
                    lastName: self.lastName,
                    firstName: self.firstName,
                    englishName: self.englishName,
                    sex: self.sex,
                    // location: location,
                    province: self.province,
                    city: self.city,
                    companyId: self.companyId,
                    country: country,
                    department: self.department,
                    startDate: startDate,
                    postgradSchool: self.postgradSchool,
                    postgradMajor: self.postgradMajor,
                    undergradSchool: self.undergradSchool,
                    undergradMajor: self.undergradMajor,
                    hobby: self.hobby,
                    card: self.card
                }
                var success = function(res) {
                    remind("注册成功", function() {
                        window.location.href = "/lx/mini/activity";
                    })
                }
                var fail = function(res) {}
                var complete = function() {}
                request(url, params, success, fail, complete);
            },
            popup(ele) {
                $(ele).modal('open');
            },
            // onProvinceChange(value, index) {
            //     this.province = value;
            //     this.city = '';
            //     this.childrenCityArray = this.cityArray[index].children;
            // },
            onProvinceChange(event) {
                this.city = '';
                var index = event.target.selectedIndex;
                if (index == 0) {
                    this.childrenCityArray = [];
                } else {
                    this.childrenCityArray = this.cityArray[index - 1].children; // index-1 第一项是“请选择”
                }
            },
            selectCountry(index) {
                var self = this;
                var array = self.countryArray;
                if (array[index].selected === 1) {
                    array[index].selected = 0;
                } else {
                    array[index].selected = 1;
                }
                self.countryArray = array;
            },
            goSelectCompany() {
                layer.open({
                    type: 2,
                    area: ['300px', '500px'],
                    title: false,
                    shadeClose: true,
                    resize: false,
                    content: '/lx/mini/user/selectCompany'
                })
            },
            goSelectSchool(type) {
                layer.open({
                    type: 2,
                    area: ['300px', '500px'],
                    title: false,
                    shadeClose: true,
                    resize: false,
                    content: '/lx/mini/user/selectSchool?type=' + type
                })
            }
        }
    })
    </script>
    <script>
    // wx.ready(function() {
    //     initWXShare()
    // })
    </script>
</body>

</html>